<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>

<meta charset="utf-8">
<title>Admin Utility</title>
<link rel="stylesheet"
	href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="resources/js/jquery-1.11.0.min.js"></script>
<script src="resources/js/jquery-ui.min.js" type="text/javascript"></script>
<script src="resources/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="resources/js/jquery.jqGrid.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" media="screen"
	href="resources/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen"
	href="resources/css/plugins/ui.multiselect.css" />
<link href="resources/css/style.css" rel="stylesheet">

<script type="text/javascript">
	$(document)
			.ready(
					function() {						

						 $("#mytabs").tabs();

						 $("#Submits").click(function(){
							 var row_count = $("#list3").getGridParam("reccount");
							 
							 var obj;
							 var obj_arr=[];
							 
							  for(var i = 1; i<=row_count; i++)
								 {
								 	 obj = {"id":jQuery("#list3").jqGrid('getCell', i, 'id'), 
									 "employe_Name":jQuery("#list3").jqGrid('getCell', i, 'employe_Name'), 
									 "emp_rolelist":$("tr#"+i+" select").val()};
								 	 
								 		obj_arr[i-1]=obj;
							  		//alert(obj_arr[i].emp_rolelist);
								 } 
							 
							//  alert (JSON.stringify(obj_arr));
							  
							 var json = {"id":"1"};
							 
							 
						    $.ajax({
						        type: "POST",
						        url: "ProcessGridData",
						       // data :  "{\"id\":2}",
						       
						        data :  JSON.stringify(obj_arr) ,
						        dataType:"json",
						        contentType: "application/json"
						    });
						});
 
						//------------------------------------------------------------------------------------------------------------------------

						/* $.ajax({
						type : "GET",
						url : 'EmpDetails',
						dataType : "json",
						success : function(response)
						          {
							alert("Res:"+response.empVo[0].employe_Name);
							$("#list3").jqGrid({
								
								colNames : [ 'SNo.', 'EmployeeName', 'Role in application' ],
								colModel : [ {
									name : 'response.empVo.id',
									index : 'SNo',
									width : 55
								}, {
									name : 'empVo[].employe_Name',
									index : 'name asc, invdate',
									width : 240
								},

								{
									name : 'RoleInAppln',
									index : 'RoleInAppln',
									width : 170,
									sortable : false,
									formatter : editLink
								} ],
								rowNum : 10,
								rowList : [ 10, 20, 30 ],
								pager : '#pager3',
								sortname : 'id',
								viewrecords : true,
								sortorder : "desc",

								caption : "Validation needs to be done for following list"
							});

							jQuery("#list3").jqGrid('navGrid', '#pager3', {
								edit : false,
								add : false,
								del : false
							});
							
							
						          }
						     }); */

						$("#list3")
								.jqGrid(
										{
											url : 'EmpDetails',
											datatype : "json",
											colNames : [ 'SNo.',
													'EmployeeName',
													'Role in application' ],
											colModel : [ {
												name : 'id',
												index : 'SNo',
												width : 55
											}, {
												name : 'employe_Name',
												index : 'name asc, invdate',
												width : 240
											},

											{
												name : 'RoleInAppln',
												index : 'RoleInAppln',
												width : 170,
												sortable : false,
												formatter : editLink
											} ],
											rowNum : 10,
											rowList : [ 10, 20, 30 ],
											pager : '#pager3',
											sortname : 'id',
											viewrecords : true,
											sortorder : "desc",

											caption : "Validation needs to be done for following list"
										});

						jQuery("#list3").jqGrid('navGrid', '#pager3', {
							edit : false,
							add : false,
							del : false
						});

					});
	
	/* $("#Submits").click(function(){
	    var gridData = jQuery("#list3").getRowData();
	    var postData = JSON.stringify(gridData);
	    alert("JSON serialized jqGrid data:\n" + postData);
	    $.ajax({
	        type: "POST",
	        url: "ProcessGridData",
	        data : {
	            jgGridData: postData,
	            customData: "bla bla"
	        },
	        dataType:"json",
	        contentType: "application/json; charset=utf-8",
	        success: function(response, textStatus, xhr) {
	            alert("success");
	        },
	        error: function(xhr, textStatus, errorThrown) {
	            alert("error");
	        }
	    });
	}); */
	
	
	/* $('#list3').jqGrid({
		  url: 'ProcessGridData',
		  editurl: ' ',
		  datatype: 'json'
	}); */

	function editLink(cellValue, options, rowdata, action) {
		var edit;
		$
		.ajax({
			type : "GET",
			url : 'RoleDetails',
			dataType : "json",
			async : false,
			success : function(response)

			{
				edit = "<select multiple = 'multiple' id='roledropdown' style='width: 116px;'><option value='0'>Select</option>";

				for (var i = 0; i < response.length; i++) {
					edit += "<option value='"+response[i].id+"'>"
							+ response[i].roleName
							+ "</option>";
				}

				edit += "</select>";
				
				

			}
		});
		
		alert("dropdown:"+edit);
		return edit;
	}

	function ChangeText(oFileInput, sTargetID) {

		document.getElementById(sTargetID).value = oFileInput.value;
	}
</script>
<style type="text/css">
td {
	padding: 0px;
}

td {
	vertical-align: top;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
</style>
</head>
<body>

	<div id="eric_header" class="wpthemeBannerInner">
		<table style="width: 100%">
			<tr>
				<td style="width: 30%"><a href='#'><img
						src="resources/img/logo.png" class="media-object" alt=""></img></a></td>
				<td style="width: 40%">
					<div align="center">

						<p>
							Welcome <label for="ABCDE">ABCDE</label>
					</div>
				</td>
				<td style="width: 30%">
					<div align="right">
						<a href="#">Logout</a>
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="3"><img src="resources/img/color_line.jpg"
					width="100%" style="PADDING-TOP: 0px"></img></td>
			</tr>
		</table>
	</div>


	<div id="mytabs">
		<ul>
			<li><a href="#tabs-3">Upload</a></li>
			<li><a href="#tabs-4">Job Change</a></li>
		</ul>
		<div id="tabs-3">
			<br> <br> <br>
			<div id="lotusLoginContent" class="roundborder">
								<form class="lotusForm2 lotusLoginForm" name="LoginForm" action="upload.do"
					enctype="multipart/form-data" method="POST">

					<table >
						<tr >

							<td style="width: 200px" ><span style="vertical-align:top;font-size: 14px;"
								onclick="javascript:document.getElementById('file').click();"><input
									type="button" value="Browse"></span></td>

							<td><input id="txt" type="text" name="name" value="Choose File" style="font-size: 14px; width:246px">
								<input id="file" type="file" name="file" style='visibility: hidden; font-size: 14px;'
								name="img" onchange="ChangeText(this, 'txt');" /></td>

						</tr>
						<tr>
							<td><label for="file" style="font-size: 14px">Choose DB file:</label></td>
							<td>
								
									<select id="datafile" name="dump_type" style="width: 247px; font-size: 14px">
										<option value="0">Select</option>
										<option value="1">HRMS DB Dump</option>
										<option value="2">ERIPRO Dump</option>
										<option value="3">CADO Dump</option>
									</select>
							
							</td>
						</tr>
						<tr>
							<td>&nbsp;</td>
							<td>&nbsp;</td>
						</tr>
						<tr>
						<td>&nbsp;</td>
							<td>
								<div class="ssoButton" align="center">
									<input type="submit" name="Submit" value="Submit"
										id="Submit.button.Submit" class="eSsoLoginField">
							</div>
							</td>
							
						</tr>
					</table>



				</form>

			</div>
		</div>
		<br> <br> <br>
		<div align="center" id="tabs-4">

			<table id="list3">

				<tr>
					<td></td>
				</tr>
			</table>
			<div id="pager3"></div>


			<br>
			<table>
				<tr>
					<td>
						<div class="ssoButton">
							<input type="submit" name="Submit" value="Submit"
								id="Submits" class="eSsoLoginField">
						</div>
					</td>
					<td>
						<div class="ssoButton">
							<input type="submit" name="Reset" value="Reset"
								id="Reset.button.Reset" class="eSsoLoginField">
						</div>
					</td>
				</tr>
			</table>
		</div>
	</div>


	<div id="ICH-FOOTER"></div>
</body>
</html>